<template>
  <div id="login" >
    <el-form v-model="loginForm"  label-width="80px" class="login-box">
        <h3 class="login-title">欢迎登录</h3>
      <el-form-item  label="账号" prop="username">
        <el-input type="text" v-model="loginForm.userAccount" placeholder="请输入账号"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.userPassword" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
    <globel-footer></globel-footer>
  </div>
</template>

<script>

import GlobelFooter from "@/components/globelFooter";
import {userApi} from "@/api/user";
import {loginForm} from "@/config/userVarConfig";
import AesUtils from "@/utils/AesUtils";
import {mapActions} from "vuex";


export default {
  name: "loginPage",
  components: {GlobelFooter},
  data() {
    return {
      loginForm: loginForm
    }
  },
  methods: {
    ...mapActions['getUUIDputState'],
    onSubmit() {
      // get post update
      // alert(this.$store.state.user.uuid+" "+this.$store.state.uuid)
      var req={};
      var userPassword = AesUtils.encrypt(loginForm.userPassword, this.$store.state.user.uuid)
      req.userPassword=userPassword
      req.userAccount=loginForm.userAccount
      this.axios.post(userApi.sysLogin, req)
          .then(res => {  //lambda
            if (!res.data.code) {
              sessionStorage.setItem('loginStatus', JSON.stringify(res.data.data))
              this.$message.success("登录成功")
              this.$router.push({path: '/'})
            } else {
              this.$message.error("登录失败！\n" + res.data.message)
            }
          })
          .catch(err => {
            this.$message.info("服务器错误" + err.data.methods)
          })
    },
    reg() {
      this.axios.get()
          .then(res => {
            if (!res.data.code) {

              this.$message.success(res.data.message)
            } else this.$message.error(res.data.message)
          })
          .catch(err => {
            this.$message.info(err.data.message)
          })
    }
  },
  mounted() {
    this.$store.dispatch('getUUIDputState');
  }
}
</script>

<style scoped>
#login{
  background: url("https://api.btstu.cn/sjbz/api.php?lx=fengjing&format=images");
  height: 100%;
  width: 100%;
  /*background: no-repeat;*/
  background-size: 100%;
  position: absolute;
}
.login-box {
  border: 0px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #999090;
  background-color: rgba(255,255,255, 0.51);
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #000000;
}
</style>